<template>
	<view class="container">
		<!-- 轮播 -->
		<swiper indicator-dots autoplay :indicator-dots="false" class="swiper">
		  <swiper-item v-for="(item, index) in bannerList" :key="index">
			<image :src="item"></image>
		  </swiper-item>
		</swiper>
		
		<!-- 新闻推荐 -->
		<view class="box" v-if="newsList.length>0">
			<view class="newsTj">新闻推荐</view>
			<view class="newsBox">
				<view v-for="(item, index) in newsList" v-if="item.switch==1" class="newsItem">
					<image :src="imgUrl+item.image" class="newsImage"></image>
					<view class="Ncontent">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 新闻列表 -->
		<view class="listBox" v-if="newsList.length>0">
			<view v-for="(item, index) in newsList" v-if="item.switch==0" class="listItem" @click="newsShow(item.id)">
				<image :src="imgUrl+item.image" class="listImage"></image>
				<view class="Lcontent">
					<view class="Ltitle">
						{{item.title}}
					</view>
					<view class="Lbot">
						{{item.createtime}}
					</view>
				</view>
			</view>
		</view>
		<view v-if="newsList.length==0">
			<nullVue></nullVue>
		</view>
		<view style="height: 80rpx;"></view>
		</view>
	</view>
</template>

<script>
	import { bannerList,newsList } from '@/api/news.js'
	import nullVue from '@/components/null';
	import config from '@/config';
	import nullVue from '@/components/null';
	export default {
		components:{
			nullVue
		},
		data() {
			return {
				imgUrl:config.baseUrl,
				bannerList:[],
				newsList:[],
			}
		},
		onLoad() {
			this.banner();
			this.getNewsList();
		},
		methods: {
			// 活动banner数据
			banner() {
				let data = {
					num:"5"
				}
				bannerList(data).then((res) => {
					if(res.code==200){
						for (let i = 0; i < res.data.length; i++) { 
						this.bannerList.push(this.imgUrl+res.data[i].image);
						}
						console.log('this.bannerList',this.bannerList)
					}
				  })
			},
			
			// 新闻列表
			getNewsList() {
				let data = {
					num:"5"
				}
				newsList(data).then((res) => {
					if(res.code==200){
						this.newsList = res.data
						console.log('this.newsList',this.newsList)
					}
				  })
			},
			
			// 跳转详情页
			newsShow(id){
				uni.navigateTo({
					url: '../news/show?id='+id,
				});
			}
		}
	}
</script>

<style>
	.container{
		width: 100%;
	}
	
	.swiper{
		height: 330rpx;
	}
	
	.swiper image{
		width: 95%;
		height: 100%;
		border-radius: 10rpx;
	}
	
	.swiper swiper-item{
		border-radius: 10rpx;
		text-align: center;
	}
	
	.newsBox{
		display: flex;
		margin-top: 10rpx;
	}
	
	.newsItem{
		margin: 10rpx;
		width: 33%;
		text-align: center;
	}
	
	.newsItem image{
		width: 100%;
		width: 206rpx;
		height: 206rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}
	
	.Ncontent{
		text-align: left;
		font-size: 24rpx;
		padding: 10rpx;
		height: 50rpx;
		display: -webkit-box;
	   -webkit-box-orient: vertical;
	   -webkit-line-clamp: 2;
	   overflow: hidden;
	   text-overflow: ellipsis;
	}
	
	.newsTj{
		border-left: 3px solid #6a8473;
		font-size: 26rpx;
		font-weight: 300;
		margin-top: 10rpx;
		margin-left: 20rpx;
		padding: 5rpx 0 5rpx 10rpx;
	}
	
	.box{
		border-bottom: 1px dashed #ddd;
	}
	
	.listItem{
		display: flex;
		padding: 0 10rpx 10rpx 0;
		margin-bottom: 20rpx;
		border-bottom: 1px solid #ddd;
	}
	
	.listItem image{
		width: 205rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}
	
	.listBox{
		margin-top: 10rpx;
		padding: 10rpx;
	}
	
	.Lcontent{
		width: 68%;
		position: relative;
		padding: 10rpx 0;
	}
	
	.Ltitle{
		font-size: 26rpx;
		display: -webkit-box;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
	    text-overflow: ellipsis;
		line-height: 47rpx;
	}
	
	.Lbot{
		font-size: 22rpx;
		position: absolute;
		bottom: 7rpx;
		right: 0;
		color: #b9b9b9;
	}
</style>